<template>
	<view class="tag-tabs">
		<view class="tag-titles">{{ title }}</view>
		<view class="tags">
			<block v-for="(tag, index) in dataArr" :key="type + index">
				<view @tap="changeTag(tag.tagId)" :class="[activeTags&&activeTags.includes(tag.tagId) ? type : '']" class="tag">{{ tag.tagName }}</view>
			</block>
		</view>
	</view>
</template>

<script>
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';	
export default {
	props: {
		type:String,
		dataArr: Array,
		title: String,
		activeTags: Array
	},
	methods: {
		changeTag(index) {
			this.$emit('changeTag', index);
		}
	}
};
</script>

<style lang="less" scoped>
.tag-tabs {
	border-top: 1rpx solid transparent;
	background-color: #f5f7fa;
	.tag-titles {
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 20rpx 40rpx 0;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #ffffff;
		padding: 0 40rpx;
		margin-bottom: 20rpx;
		.tag {
			margin: 10rpx 10rpx 10rpx 0;
			background-color: #eeeeef;
			color: #999999;
			font-size: 26rpx;
			padding: 5rpx 10rpx;
			border-radius: 8rpx;
		}
		.me {
			color: #ffffff;
			background: #f86090;
		}
		.need {
			color: #ffffff;
			background-color: #fead42;
		}
	}
}
</style>
